<template>
  <a-drawer
    title="坐标拾取"
    :placement="placement"
    :closable="true"
    :destroyOnClose="true"
    width="100%"
    height="100%"
    @close="onClose"
    :zIndex="10001"
    :visible="visible"
    wrapClassName="scoped-drawer"
  >
    <div class="map-wrap">
      <div class="map-container" id="container"></div>
      <div class="submit-btn">
        <a-row :gutter="20">
          <a-col :span="4">
            <a-select
              show-search
              v-model="address"
              style="width: 200px"
              placeholder="请输入要搜索的区域名称"
              :default-active-first-option="false"
              :show-arrow="false"
              :filter-option="false"
              :not-found-content="null"
              @search="inputSearch"
              @change="inputChange"
            >
              <a-select-option v-for="(item, index) in suggestionList" :key="index" :value="item.id"
                >{{ item.title }}-{{ item.address }}</a-select-option
              >
            </a-select>
          </a-col>
          <a-col :span="8" offset="5" v-if="borderLine">
            <div>{{ borderStr }}</div>
            <a-button @click="saveBorderLine" type="primary">保存边界</a-button>
          </a-col>
          <a-col :span="8" offset="5" v-else>
            <a-input placeholder style="width: 200px" v-model="latLng" />
            <a-button @click="confimClick" type="primary">确认选择</a-button>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: 'Index',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      placement: 'top',
      address: '',
      borderLine: false,

      latLng: '',
      suggestionList: [],

      borderStr: '',
      polyEditor: null,
    }
  },
  watch: {
    visible: function (newValue) {
      if (newValue) {
        this.$nextTick(() => {
          this.latLng = ''
          this.address = ''
          this.borderStr = ''
          // this.init()
        })
      }
    },
  },
  mounted() {},
  methods: {
    onClose() {
      this.visible = false
      this.$emit('update:visible', false)
    },

    init() {
      let { policeAgencyLat, policeAgencyLng } = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
      this.map = new TMap.Map(document.getElementById('container'), {
        center: new TMap.LatLng(policeAgencyLat, policeAgencyLng), // 西安
        zoom: 14,
        minZoom: 6,
        maxZoom: 20,
        doubleClickZoom: false,
        showControl: false,
      })

      this.map.on('click', (event) => {
        let {
          latLng: { lat, lng },
        } = event
        this.latLng = `${lng},${lat}`
      })

      this.suggest = new TMap.service.Suggestion({ pageSize: 10 })
    },

    async inputSearch(val) {
      let { data } = await this.suggest.getSuggestions({ keyword: val, location: this.map.getCenter() })
      this.suggestionList = data
    },

    inputChange() {
      let { lat, lng } = this.suggestionList.find((item) => item.id === this.address).location
      this.map.setCenter(new TMap.LatLng(lat, lng))

      if (this.borderLine) this.renderSearchArea(lat, lng)
    },

    // 渲染图层
    renderSearchArea(lat, lng) {
      let paths = [
        new TMap.LatLng(lat, lng),
        new TMap.LatLng(lat + 0.011, lng + 0.011),
        new TMap.LatLng(lat - 0.011, lng + 0.011),
      ]
      // 初始化几何图形及编辑器
      this.polyEditor = new TMap.tools.GeometryEditor({
        map: this.map, // 编辑器绑定的地图对象
        overlayList: [
          // 可编辑图层
          {
            overlay: new TMap.MultiPolygon({
              map: this.map,
              styles: {
                highlight: new TMap.PolygonStyle({
                  color: 'rgba(255, 255, 0, 0.6)',
                }),
              },
              geometries: [
                {
                  paths,
                },
              ],
            }),
            id: 'polygon',
            selectedStyleId: 'highlight',
          },
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
        activeOverlayId: 'polygon', // 激活图层
        selectable: true, // 开启点选功能
        snappable: true, // 开启吸附
      })

      this.polyEditor.on('adjust_complete', (event) => {
        let { paths } = event
        let arr = []
        paths.forEach((item) => {
          arr.push(`${item.lng},${item.lat}`)
        })
        this.borderStr = arr.join(';')
      })
    },

    confimClick() {
      if (this.latLng === '') {
        this.$message.error('请点击目标地点获取坐标后再保存！！！')
        return
      }
      this.$emit('getLatLong', this.latLng.split(','))
      this.$emit('update:visible', false)
    },

    saveBorderLine() {
      if (this.borderStr === '') {
        this.$message.error('请编辑边界后再保存！！！')
        return
      }
      this.$emit('border', this.borderStr)
      this.borderLine = false
      this.borderStr = ''
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style scoped lang="less">
.map-wrap {
  position: relative;

  .submit-btn {
    position: absolute;
    top: 0;
    width: 100%;
  }
}
</style>

<style>
.ant-select-dropdown {
  z-index: 99999;
}
.ant-message {
  z-index: 999999;
}
</style>
